<template>
  <el-container>
    <el-header>
      <my-title :title="'表单添加'"></my-title>
    </el-header>
    <el-main>

      <el-tabs type="border-card" v-model="currentTabPane">
        <el-tab-pane label="任务信息" name="1">
          <el-form ref="ruleForm" :model="tempForm" label-width="130px" :rules="taskRules">
            <el-form-item label="表单名称" prop="linkname">
              <el-input v-model="tempForm.linkname" style="width:180px" />
            </el-form-item>
            <el-form-item label="流程编号" prop="procno">
              <el-input v-model="tempForm.procno" style="width:180px" @focus="chooseProcessClick" readonly />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input v-model="tempForm.sort" style="width:180px" />
            </el-form-item>
            <el-form-item label="路径" prop="linkpath">
              <el-input v-model="tempForm.linkpath" style="width:180px" placeholder="views/forms/test1/index"/>
            </el-form-item>
            <el-form-item label="查询径" prop="querypath">
              <el-input v-model="tempForm.querypath" style="width:180px" placeholder="views/forms/test1/index"/>
            </el-form-item>
            <el-form-item label="是否使用" prop="useflag">
              <el-select v-model="tempForm.useflag" placeholder="请选择">
                <el-option
                  v-for="item in dir_logic"
                  :key="item.id"
                  :label="item.label"
                  :value="item.data"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="是否显示" prop="isview">
              <el-select v-model="tempForm.isview" placeholder="请选择">
                <el-option
                  v-for="item in dir_logic"
                  :key="item.id"
                  :label="item.label"
                  :value="item.data"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="是否必填" prop="flag">
              <el-select v-model="tempForm.flag" placeholder="请选择">
                <el-option
                  v-for="item in dir_logic"
                  :key="item.id"
                  :label="item.label"
                  :value="item.data"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-row style="text-align: center;margin-top:20px;">
          <el-button type="primary" @click="addTask">确 定</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-row>

      </el-tabs>

    </el-main>

    <el-dialog title="流程选择" :visible.sync="dialogProcessVisible" :close-on-click-modal="false" center :custom-class="dialog1" append-to-body>
      <process-list @processListClose="closeProcessDialog" />
    </el-dialog>

  </el-container>
</template>
<script>
import request from '@/utils/request'
import processList from '@/components/ProcessList/index'
import { clone } from 'lodash'
export default {
  components: {
    processList
  },
  data: function() {
    return {
      dialog1: 'dialog1',
      tempForm: {},
      currentTabPane: '1',
      dialogProcessVisible: false,
      taskRules: {
        linkname: [
          { required: true, message: '请输入表单名称', trigger: 'blur' }
        ],
        procno: [
          { required: true, message: '请输入流程编号', trigger: 'blur' }
        ],
        linkpath: [
          { required: true, message: '请输入文件路径', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        useflag: [
          { required: true, message: '请选择是否使用', trigger: 'blur' }
        ],
        isview: [
          { required: true, message: '请选择是否显示', trigger: 'blur' }
        ],
        flag: [
          { required: true, message: '请选择是否必须', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    dir_logic: function() {
      return this.$store.state.directory.directory['logic']
    }
  },
  created() {
    this.directoryUpdate()
  },
  methods: {
    chooseProcessClick: function() {
      this.dialogProcessVisible = true
    },
    closeProcessDialog: function(ids, objs) {
      if (objs) {
        objs.forEach((obj) => {
          this.tempForm.procno = obj.procno
        })
      }
      this.dialogProcessVisible = false
      this.tempForm = clone(this.tempForm)
    },
    // 字典更新
    directoryUpdate: function() {
      this.$store.commit('directory/setDirectory', 'logic')
    },
    // 取消
    cancel: function() {
      this.$emit('toChangePage', 'list')
    },
    // 验证所有表单
    validate: function() {
      const self = this
      return new Promise(function(resolve) {
        self.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            resolve(true)
          } else {
            return false
          }
        })
      })
    },
    // 添加装备任务
    addTask: function() {
      // 验证表单内容后提交
      this.validate().then(valid => {
        if (valid) {
          this.$progress.start()
          request({
            url: '/task/form/add',
            method: 'post',
            data: this.tempForm
          }).then(res => {
            this.$progress.done()
            if (res.result) {
              this.cancel()
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          }
          ).catch(() => {
            this.$progress.done()
          })
        }
      })
    }
  }
}
</script>
